import React, { Component } from 'react'
// 在react中样式它是没有进行样式隔离处理，定义样式名称是一定要注意名称是唯一
// import './style.css'
// import './style.scss'
// css-module
import styles from './style.module.scss'
// 样式隔离是我们在项目所需要的
//  + 1.名称约束，定义的样式名称要按目录和文件来进行定义
//  + 2.通过css预处理方案  scss/stylus/less => 只给当前组件的顶层起一个唯一的名称，子孙元素就可以随便，在scss中可以通过嵌套来定义样式就可以了 -- 使用的较多
//     - react中使用scss  npm i -D sass
//  + 3.react工程它是有一个css模块方案来实现css隔离 名称后缀有要求 xx.module.css/scss/...
//    - 它导入后为一个对象，class名称为对象的属性名称，把css嵌套进行扁平化，直接 styles.xx
//  + 4.css-in-js方案，通过js来定义css实现css隔离
//    - style-components 实现css-in-js最流行的库

class Child extends Component {
  render() {
    return (
      // <div className="child-index">
      <div className={styles['child-index']}>
        {/* <div className="child-index-title">我是child标题</div> */}
        {/* <div className="title">我是child标题</div> */}
        <div className={styles.title}>我是child标题</div>
      </div>
    )
  }
}

export default Child
